<template>
  <div class="cart">
    <van-card
      v-for="item in list"
      :key="item.id"
      :price="item.price"
      :title="item.title"
    >
      <template #thumb>
        <div class="checkbox-img">
          <van-checkbox v-model="item.checked"></van-checkbox>
          <van-image width="80" height="80" lazy-load :src="item.img" />
        </div>
      </template>

      <template #footer>
        <van-stepper v-model="item.num"  @change="onchange"/>
      </template>
    </van-card>

    <div class="jiesuan">
      <van-submit-bar
        :price="zprice * 100"
        button-text="结算"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { computed, ref } from "vue";
import axios from "axios";
const active = ref(1);
const list = ref([]);
axios.get("/getlist").then((res) => {
  console.log(res);
  list.value = res.data.list;
});
list.value=list.value.map(item=>{
    item.isChecked=false
    return item
})
console.log(list.value);

//全选反选
const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});

//总价
const zprice = computed(() => {
  let zprice = 0;
  let checked = list.value.filter((item) => item.checked);
  checked.forEach((item) => {
    zprice += item.price * item.num;
  });
  return zprice;
});

//节流
import jieliu from '@/utils/index'
const onchange = jieliu(() =>{

},800)
</script>
<style scoped lang='scss'>
.cart {
  margin-bottom: 100px;
  .checkbox-img {
    display: flex;
    width: 110px;
    justify-content: space-between;
  }
  :deep(.van-card__title) {
    margin-left: 25px;
  }
  :deep(.van-card__price) {
    margin-left: 25px;
  }
}
.jiesuan .van-submit-bar {
  margin-bottom: 50px;
}
</style>